<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px" label-position="top">
            <div class="section back-fff">
                <div class="title">PROFILE PHOTO</div>
                <div class="user-img">
                    <el-avatar shape="square" :src="form.F_HeadIcon" fit="contain" icon="el-icon-user-solid">
                    </el-avatar>
                </div>
                <el-button type="primary" class="upload-phonto" size="medium">
                    {{ form.F_HeadIcon ? 'Modify Photo' : 'Upload Photo' }}
                    <input type="file" accept="image/*" id="upload" @change="changeFIle" class="file" />
                </el-button>
            </div>
            <div class="section back-fff">
                <div class="title">Profile</div>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="First Name" prop="F_FirstName"
                            :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-input v-model="form.F_FirstName" placeholder="First Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Gender" prop="F_Gender"
                            :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-radio v-model="form.F_Gender" :label="1">Male</el-radio>
                            <el-radio v-model="form.F_Gender" :label="2">Female</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Last Name" prop="F_LastName"
                            :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-input v-model="form.F_LastName" placeholder="Last Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Birth Date ">
                            <!-- <el-input v-model="form.F_Birthday" placeholder="Birth Date "></el-input> -->
                            <el-date-picker style="width:100%;" v-model="form.F_Birthday" type="date"
                                placeholder="Birth Date ">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Full Name" prop="F_RealName"
                            :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-input v-model="form.F_RealName" placeholder="Full Name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="section back-fff">
                <div class="title">Contact Details</div>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="Email" prop="F_Email"
                            :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-input v-model="form.F_Email" placeholder="Email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Country">
                            <el-select v-model="form.F_Country" placeholder="Country">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Mobile Phone"  :rules="{ required: true, message: 'Please input', trigger: 'change' }">
                            <el-input v-model="form.F_Telephone" placeholder="Mobile Phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Home Street Address 1">
                            <el-input v-model="form.F_HomeAddress1" placeholder="Home Street Address 1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Home Telephone" prop="F_FirstName">
                            <el-input v-model="form.F_Mobile" placeholder="Home Telephone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Home Street Address 2">
                            <el-input v-model="form.F_HomeAddress2" placeholder="Home Street Address 2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div style="width: 100%; opacity: 0">s</div>
                    </el-col>
                    <el-col :span="12">
                        <el-row :gutter="15">
                            <el-col :span="8">
                                <el-form-item label="City">
                                    <el-input v-model="form.F_City" placeholder="City"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="Sate">
                                    <el-input v-model="form.F_State" placeholder="Sate"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="Postal Code">
                                    <el-input v-model="form.F_PostalCode" placeholder="Postal Code"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div class="section-add back-fff">
                <el-button type="primary" @click="submit" :loading="loading">Save Changes</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
import { GetUserInfo, ModifyUserInfo, PostUploadApi } from "@/api/user";
import Regs from "@/utils/Regs.js";
export default {
    data() {
        return {
            form: {},
            options: [
                {
                    value: "1",
                    label: "China"
                },
                {
                    value: "选项2",
                    label: "双皮奶"
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                }
            ],
            loading: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            GetUserInfo({
                F_UserId: this.$store.state.user.F_UserId
            }).then((res) => {
                if (res.data.Data.length > 0) {
                    this.form = res.data.Data[0] || {};
                    this.$nextTick(() => {
                        this.$refs.form && this.$refs.form.clearValidate();
                    });
                }
            });
        },
        // 提交表单
        submit() {
            this.$refs.form.validate((valid) => {
                if (!valid) return false;
                if (!Regs.email.test(this.form.F_Email)) {
                    return this.$message.warning({
                        message: "Please input correct email"
                    });
                }
                if (!Regs.mobile.test(this.form.F_Telephone)) {
                    return this.$message.warning({
                        message: "Please input Mobile Phone"
                    });
                }
                this.loading = true;
                ModifyUserInfo({
                    F_UserId: this.$store.state.user.F_UserId,
                    ...this.form
                }).then(() => {
                    this.loading = false;
                    this.userChange();
                    this.$message.success({ message: "Set successfully" });
                }).catch(() => (this.loading = false));
            });
        },
        // 改变仓里user
        userChange() {
            let users = { ...this.$store.state.user };
            const { F_RealName, F_HeadIcon } = this.form;
            users.F_RealName = F_RealName;
            users.F_HeadIcon = F_HeadIcon;
            this.$store.commit("setuser", users);
        },
        // 图片上传
        changeFIle(event) {
            let $file = event.currentTarget;
            let formData = new FormData();
            let file = $file.files;
            formData = new FormData();

            formData.append("file", file[0]);

            PostUploadApi(formData).then((res) => {
                this.$set(this.form, "F_HeadIcon", res.data.url || "");
            });
        }
    }
};
</script>
<style scoped lang="scss">
.title {
    font-size: 16px;
    line-height: 50px;
    border-left: 6px solid #2d9ef3;
    padding-left: 21px;
    margin-left: -39px;
}

.section {
    padding-left: 39px;
    padding-right: 20px;
    margin-bottom: 5px;

    &:last-child {
        margin-bottom: 0;
    }
}

.section-add {
    padding: 20px;
}

.user-img {
    width: 80px;
    height: 80px;

    ::v-deep .el-avatar {
        width: 100%;
        height: 100%;
        line-height: 80px;
        font-size: 32px;
    }
}

.upload-phonto {
    margin-top: 13px;
    margin-bottom: 30px;
    position: relative;

    .file {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

.el-form-item {
    height: 93px;
}

.el-select {
    width: 100%;
}
</style>